<template>
    <div class="bigBox">
        <div v-for="item in list" :key="item.id" class="item">
            <div>地震区域：{{ item.LOCATION }}</div>
            <div>地震时间：{{ item.TIME }}</div>
            <div>震级：{{ item.M }}</div>
            <div>深度：{{ item.DEPTH }}km</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getEarthquakeInformation } from '@/api/meet'
const list: any = ref([])
const getData = () => {
    getEarthquakeInformation().then(res => {
        list.value = res
    })
}
getData()
</script>

<style scoped lang="scss">
.bigBox {
    max-height: 100%;
    width: 100%;
    @include scroll-bar();
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;

    .item {
        height: 100%;
        width: 100%;
        line-height: 30px;
        box-shadow: 1px 2px 5px rgba(128, 128, 128, 0.568);
        border-radius: 5px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 18px;
    }
}
</style>